在現代網頁開發中，網站不再是靜態的 HTML 和 CSS 文件組成，而是可以通過 HTTP 請求動態獲取和傳送數據，與各種服務互動。今天，我們將深入介紹 HTTP（HyperText Transfer Protocol）的基本概念，並展示如何使用 Fetch API 從外部資源獲取數據。

什麼是 HTTP？

HTTP 是一種基於請求-回應模型的協議，當瀏覽器向伺服器發送請求時，伺服器會返回一個回應。每次我們訪問一個網頁，瀏覽器其實都在進行 HTTP 請求來獲取資料。
常見的 HTTP 請求方法包括：

• GET：從伺服器獲取資料，通常用於讀取資訊，不應改變伺服器的狀態。
• POST：將資料發送到伺服器，通常用於提交表單或上傳檔案，會改變伺服器的狀態。

2. GET 與 POST 的區別

• GET 請求：用來向伺服器請求數據，並將請求的參數附加在 URL 中，適合用於獲取少量且不敏感的數據。因為請求參數在 URL 中顯示，對安全性要求較高的操作不建議使用 GET。
  範例：

<a href="https://example.com/api/data?id=123">點擊獲取數據</a>

• POST 請求：用來向伺服器提交數據，數據放置在請求的 body 中，適合傳遞大量或敏感數據，如表單資料或上傳文件。相對於 GET 更安全，因為數據不會暴露在 URL 中。
  範例：

<form method="POST" action="https://example.com/api/submit">
  <input type="text" name="username">
  <button type="submit">提交</button>
</form>

Fetch API 的使用

在過去，JavaScript 使用一個叫 XMLHttpRequest 的東西來發送網絡請求，但它的語法有點複雜，不容易使用。而 Fetch API 是一個更現代、更簡單的替代方案，它的設計使得我們可以用更簡短、易懂的方式來處理請求，尤其是配合 Promise，可以讓我們更好地處理異步操作。
Fetch API 的基本工作方式就是向一個網址（URL）發送請求，然後等待伺服器回應資料。例如，你可以想像 Fetch API 像是一個郵差，幫你將信件（請求）送到伺服器，然後將回應（資料）帶回給你。

Fetch API 範例：

我們將示範如何使用 Fetch API 發送一個 GET 請求，並從外部 API 獲取數據。

// 發送 GET 請求
fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('錯誤:', error));

POST 請求示範：

// 發送 POST 請求
fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: '測試標題',
    body: '這是測試內容',
    userId: 1
  })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('錯誤:', error));

結論

HTTP 請求是現代網頁與外部世界互動的重要方式。掌握 GET 和 POST 請求的區別，並學會使用 Fetch API，將幫助你構建更豐富、動態的網頁應用。在未來的文章中，我們將介紹更多有關 API 交互的進階技巧，敬請期待！